﻿<DemoPageSectionComponent Id="Editors-MaskedInput-OnInputBinding" ShowSizeMode="true">
    <ChildContentWithParameters Context="Params">
        <label for="teInputBinding" class="demo-text cw-320 mb-1">
            Price
        </label>
        <DxMaskedInput @bind-Value="@Price"
                       Mask="@NumericMask.Currency"
                       BindValueMode="@BindValueMode"
                       InputDelay="@InputDelay"
                       NullText="Type text..."
                       SizeMode="Params.SizeMode"
                       CssClass="cw-320"
                       InputId="teInputBinding"/>
        <p class="demo-text cw-320 mt-3">
            The entered value is: <b>@Price</b>
        </p>
    </ChildContentWithParameters>

    <OptionsContent>
        <OptionComboBox CssClass="ow-150"
                        Data="Enum.GetValues<BindValueMode>()"
                        @bind-Value="BindValueMode"
                        Label="Bind Value Mode:" />
        <OptionSpinEdit CssClass="ow-150"
                        MinValue="100"
                        MaxValue="1000"
                        Increment="100"
                        Enabled="@BindDelayEnabled"
                        Label="Input Delay:"
                        @bind-Value="InputDelay" />
    </OptionsContent>

    @code {
        double Price { get; set; }
        int? InputDelay { get; set; } = 500;
        BindValueMode BindValueMode { get; set; } = BindValueMode.OnInput;
        bool BindDelayEnabled { get { return BindValueMode == BindValueMode.OnDelayedInput; } }
    }
</DemoPageSectionComponent>
